<template>
  <div class="overheadContent">
    <div class="top">
      <p>本年度开销数额 :</p>
    </div>
    <div class="number">
      <div class="numberItem" v-for="(item, index) in numberList" :key="item.id">
        <span>{{ item }}</span>
      </div>
      <div class="numberItemList">元</div>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, watch } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'

const charts = ref()
const numberList = ref([])
const number = ref<any>('')

const props = withDefaults(
  defineProps<{
    money: string
  }>(),
  {
    money: ''
  }
)

const mkCharts = () => {
  const myCharts = echarts.init(charts.value)
  // 水球图
  myCharts.setOption({
    // title: {
    //   text: ''
    // },
    series: {
      type: 'liquidFill',
      data: [0.5, 0.3, 0.2],
      color: ['#8b2f26', '#511d1e', '#fbefb8'],
      backgroundStyle: {
        borderWidth: 1,
        borderColor: 'rgba(0, 0, 0, 0.6)',
        color: 'rgba(0, 0, 0, 0.4)',
      },
      wavaAnimation: true,
      animationDuration: 3,
      animationDurationUpdate: 0,
      radius: '98%',
      outline: {
        show: true,
        borderDistance: 8,
        itemStyle: {
          // color: 'rgba(0, 0, 0, 0.25)',
          borderColor: 'rgba(0, 0, 0, 0.6)',
          borderWidth: 8,
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.4)'
        }
      },
      label: {
          position: ['48%', '20%'],
          formatter: function() {
              return '超额预警'
          },
          fontSize: 30,
          color: '#D94854'
      },
    }
  })
}

watch(props, () => {
  if (props.money) {
    number.value = props.money
    number.value = Number(number.value)
    number.value = Math.floor(number.value).toString()
    numberList.value = number.value.split('')
  }
})

onMounted(() => {
  mkCharts()
})

</script>

<style lang="scss" scoped>
.overheadContent {
  width: 100%;
  margin-top: 20px;
  padding-left: 10px;

  .top {
    margin-bottom: 30px;
    p {
      color: #fbefb8;
      font-size: 30px;
      font-weight: 500;
    }
  }
  .number {
    display: flex;
    margin-bottom: 30px;
    .numberItem {
      width: 50px;
      height: 50px;
      line-height: 50px;
      background: #2c1413;
      text-align: center;
      margin-right: 7px;
      span {
        font-size: 36px;
        font-weight: 700;
      }
    }
    .numberItemList {
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 38px;
      color: #fbefb8;
      margin-left: 10px;
    }
  }
  .charts {
    // background: #2c1413;
    // opacity: 0.6;
    width: 100%;
    height: 280px;
  }
  
}
</style>